<template>
  <div>
    <a type="primary" @click="showDrawer"> 寝室信息 </a>
    <a-drawer
      title="寝室信息"
      :width="720"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <a-spin v-if="loading" />
      <template v-else>
        <h2>寝室号:{{this.dataSource.roomInfo.roomId}}</h2>
        <br>
        <a-form :form="form" layout="vertical" hide-required-mark @submit="handleSubmit">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="寝室备注">
                <a-input
                  v-decorator="[
                    'memo',
                    {
                      rules: [{ required: false }],
                    },
                  ]"
                  :placeholder="this.dataSource.roomInfo.memo==''?'请输入备注':this.dataSource.roomInfo.memo"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="寝室长">
                <a-select
                  v-decorator="[
                    'leaderId',
                    {
                      rules: [{ required: true, message: '请选择寝室长' }],
                    },
                  ]"
                  :placeholder="this.dataSource.roomInfo.leaderId==''?'请选择寝室长':this.dataSource.roomInfo.leaderId"
                >
                  <a-select-option v-for="(item,index) in dataSource.student" :key="index" :value="item.studentId">
                  {{item.studentId}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="寝室人数">
                <a-select
                  v-decorator="[
                    'number',
                    {
                      rules: [{ required: true, message: '请选择寝室人数' }],
                    },
                  ]"
                  :placeholder="this.dataSource.roomInfo.number==''?'请选择寝室人数':this.dataSource.roomInfo.number"
                  v-model="dataSource.roomInfo.number"
                >
                  <a-select-option v-for="(item,index) in [1,2,3,4]" :key="index" :value="item" >
                  {{item}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <div v-for="(i,index) in this.dataSource.roomInfo.number" :key="index">
            <h2>学生{{i}}</h2>
            <a-row :gutter="16">
            <a-col :span="6">
              <a-form-item label="学号">
              <a-input
                  v-decorator="[
                    'studentId_'+index,
                    {
                      rules: [{ required: true, message: '请输入学生学号' }],
                    },
                  ]"
                  :placeholder="dataSource.student[index].studentId==''?'请输入学生学号':dataSource.student[index].studentId"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="姓名">
                <a-input
                  v-decorator="[
                    'name_'+index,
                    {
                      rules: [{ required: true, message: '请输入学生姓名' }],
                    },
                  ]"
                  :placeholder="dataSource.student[index].name==''?'请输入学生姓名':dataSource.student[index].name"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="手机号码">
                <a-input
                  v-decorator="[
                    'phone_'+index,
                    {
                      rules: [{ required: true, message: '请输入手机号' }],
                    },
                  ]"
                  :placeholder="dataSource.student[index].phone==''?'请输入手机号':dataSource.student[index].phone"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="状态">
                <a-select
                  v-decorator="[
                    'status_'+index,
                    {
                      rules: [{ required: true, message: '请选择学生状态' }],
                    },
                  ]"
                  :placeholder="dataSource.student[index].status==''?'正常':dataSource.student[index].status"
                >
                  <a-select-option value="正常">
                    正常
                  </a-select-option>
                  <a-select-option value="请假">
                    请假
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            </a-row>
          </div>
          <div
            :style="{
              position: 'absolute',
              right: 0,
              bottom: 0,
              width: '100%',
              borderTop: '1px solid #e9e9e9',
              padding: '10px 16px',
              background: '#fff',
              textAlign: 'right',
              zIndex: 1,
            }"> 
            <a-form-item>
            <a-button :style="{ marginRight: '8px' }" @click="onClose">
              取消
            </a-button>
            <a-button type="primary" html-type="submit">
              提交
            </a-button>
            </a-form-item>
          </div>
            
          </a-form>
      </template>
    </a-drawer>
  </div>
</template>
<script>
import {mapActions} from "vuex"
import errorVue from '~/pages/mainPage/error.vue';
export default {
  data() {
    return {
      loading: true,
      form: this.$form.createForm(this),
      visible: false,
      dataSource: {
        roomInfo:{
          key:0,
          roomId:512,
          number:3,
          leaderId:'8209190507',
          temperature:28.0,
          humility:0.4,
          status:'正常',
          memo:'',  
        },   
        student:[
          {
              key:0,
              studentId:'8209190507',
              roomId:512,
              name:'夏家豪',
              status:'请假',
              phone:'17812312323'
            },
            {
              key:1,
              studentId:'8209190508',
              roomId:512,
              name:'夏家豪1',
              status:'请假',
              phone:'17812312323'
            },
            {
              key:2,
              studentId:'8209190509',
              roomId:512,
              name:'夏家豪2',
              status:'请假',
              phone:'17812312323'
            },
            {
              key:3,
              studentId:'',
              roomId:512,
              name:'',
              status:'正常',
              phone:''
            },
        ]
      }
    };
  },
  props: {
    myKey: {
      type: Number,
      required: true
    }
  },
  methods: {
    ...mapActions({
      getRoom:'room/getRoom',
      getStudentByRoom:'student/getStudentByRoom',
      updateStudent:'student/updateStudent',
      updateRoom:'room/updateRoom'
    }),
    getStudent(key){
      this.getRoom(key).then((res)=>{
        this.dataSource.roomInfo = res.rooms[0]
        this.getStudentByRoom(key).then((res)=>{
          this.dataSource.student = res.students
          console.log('AAAVVV',this.dataSource)
          this.loading = false
        },(error)=>{
          this.openNotification('NOK','获取寝室信息失败','请稍后重试')
        })
      },(error)=>{
        this.openNotification('NOK','获取寝室信息失败','请稍后重试')
      })
      
    },
    showDrawer() {
      this.visible = true;
      this.getStudent(this.myKey)
    },
    onClose() {
      this.visible = false;
      this.form.resetFields();
    },
    openNotification(type,title,msg) {
      let iconType = ''
      let iconColor = ''
      if(type=='OK'){
        iconType = 'smile'
        iconColor = '#52c41a'
      }
      else
      {
        iconType = 'frown'
        iconColor = '#eb2f96'
      }
      this.$notification.open({
        message: title,
        description: msg,
        icon: h => h('a-icon', {
          props: {
            type: iconType,
            theme: 'twoTone',
            'two-tone-color': iconColor
          }
        }),
       
      });
    },
    handleSubmit(e) {
      e.preventDefault();
      let self = this
      this.form.validateFields((err, values) => {
        if (!err) {
          // // console.log('Received values of form: ', values);
          // this.addItem(values).then((res)=>{
          //   this.openNotification("OK","新增宠物信息成功",res)
            this.$emit('update-info')
          //   self.onClose()
          // },(error)=>{
          //   this.openNotification("NOK","新增宠物信息失败",error)
          //   self.onClose();
          // })
          console.log(values)
        }
        else{
          console.log("subOK")
        }
      });
    },
  },
  mounted(){
  }
};
</script>

<style lang="scss" scoped>

</style>